<template>
    <div class="vant-demo-container">
        <van-nav-bar
            title="Vant组件测试"
            left-text="返回"
            left-arrow
            fixed
            @click-left="$router.back()"
        />

        <div class="content">
            <!-- 按钮 Button -->
            <section class="demo-section">
                <h3>主题切换：{{ currentTheme }}</h3>
                <div class="demo-block">
                    <van-button
                        size="small"
                        :type="theme==='auto'?'primary':'default'"
                        @click="setTheme('auto')"
                    >
                        自动
                    </van-button>
                    <van-button
                        size="small"
                        :type="theme==='light'?'primary':'default'"
                        style="margin-left:8px;"
                        @click="setTheme('light')"
                    >
                        明亮
                    </van-button>
                    <van-button
                        size="small"
                        :type="theme==='dark'?'primary':'default'"
                        style="margin-left:8px;"
                        @click="setTheme('dark')"
                    >
                        暗黑
                    </van-button>
                </div>
            </section>
            <!-- 按钮 Button -->
            <section class="demo-section">
                <h3>按钮 Button</h3>
                <div class="demo-block">
                    <van-button
                        type="primary"
                        @click="showToast('按钮被点击')"
                    >
                        主要
                    </van-button>
                    <van-button
                        type="success"
                        style="margin-left: 8px;"
                    >
                        成功
                    </van-button>
                    <van-button
                        type="danger"
                        style="margin-left: 8px;"
                    >
                        危险
                    </van-button>
                    <van-button
                        type="warning"
                        style="margin-left: 8px;"
                    >
                        警告
                    </van-button>
                </div>
            </section>

            <!-- 单元格 Cell -->
            <section class="demo-section">
                <h3>单元格 Cell</h3>
                <div class="demo-block">
                    <van-cell-group>
                        <van-cell
                            title="单元格"
                            value="内容"
                        />
                        <van-cell
                            title="可点击单元格"
                            is-link
                            @click="showToast('点击了Cell')"
                        />
                    </van-cell-group>
                </div>
            </section>

            <!-- 表单 Form + Field -->
            <section class="demo-section">
                <h3>表单 Form</h3>
                <div class="demo-block">
                    <van-form @submit="onFormSubmit">
                        <van-field
                            v-model="formData.username"
                            name="用户名"
                            label="用户名"
                            placeholder="请输入用户名"
                            required
                        />
                        <van-field
                            v-model="formData.password"
                            type="password"
                            name="密码"
                            label="密码"
                            placeholder="请输入密码"
                            required
                        />
                        <!-- NumberKeyboard 数字键盘 -->
                        <van-field
                            v-model="numberValue"
                            label="数字输入"
                            placeholder="点击右侧图标唤起键盘"
                            readonly
                            @click="showKeyboard = true"
                        >
                            <template #right-icon>
                                <van-icon name="keyboard-o" />
                            </template>
                        </van-field>
                        <van-number-keyboard
                            :show="showKeyboard"
                            @update:show="showKeyboard = $event"
                            @input="onNumberInput"
                            @delete="onNumberDelete"
                            @blur="showKeyboard = false"
                        />
                        <div style="margin: 16px 0;">
                            <van-button
                                round
                                block
                                type="primary"
                                native-type="submit"
                            >
                                提交
                            </van-button>
                        </div>
                    </van-form>
                </div>
            </section>

            <!-- Popup 弹出层 -->
            <section class="demo-section">
                <h3>弹出层与交互组件</h3>
                <div class="demo-block">
                    <van-button
                        type="primary"
                        @click="showPopup = true"
                    >
                        弹出层
                    </van-button>
                    <van-popup
                        v-model:show="showPopup"
                        position="bottom"
                        round
                        closeable
                    >
                        <div style="padding: 24px; text-align: center;">
                            这是一个弹出层
                        </div>
                    </van-popup>

                    <!-- Toast -->
                    <van-button
                        type="success"
                        style="margin-left: 8px;"
                        @click="showToast('Hello Vant!')"
                    >
                        Toast
                    </van-button>

                    <!-- Picker 选择器 -->
                    <van-button
                        type="primary"
                        style="margin-left: 8px;"
                        @click="showPicker = true"
                    >
                        选择器
                    </van-button>
                    <van-popup
                        v-model:show="showPicker"
                        position="bottom"
                    >
                        <van-picker
                            :columns="pickerColumns"
                            @confirm="onPickerConfirm"
                            @cancel="showPicker = false"
                        />
                    </van-popup>
                    
                    <!-- ActionSheet 动作面板 -->
                    <van-button
                        type="primary"
                        style="margin-left: 8px;"
                        @click="showActionSheet = true"
                    >
                        动作
                    </van-button>
                    <van-action-sheet
                        v-model:show="showActionSheet"
                        :actions="actions"
                        @select="onActionSelect"
                    />

                    <!-- Dialog 弹窗 -->
                    <van-button
                        type="danger"
                        style="margin-left: 8px;"
                        @click="showDialogFn"
                    >
                        Dialog
                    </van-button>
                </div>
            </section>

            <section class="demo-section">
                <h3>通知与提示组件</h3>
                <div class="demo-block">
                    <!-- Notify 消息通知 -->
                    <van-button
                        type="warning"
                        @click="showNotifyFn"
                    >
                        通知
                    </van-button>

                    <!-- Popover 气泡弹出框 -->
                    <van-popover
                        v-model:show="showPopover"
                        style="margin-left: 8px;"
                        :actions="popoverActions"
                        @select="onPopoverSelect"
                    >
                        <template #reference>
                            <van-button type="primary">
                                Popover
                            </van-button>
                        </template>
                    </van-popover>
                    
                    <!-- ImagePreview 图片预览 -->
                    <van-button
                        type="primary"
                        style="margin-left: 8px;"
                        @click="showImagePreview"
                    >
                        图片预览
                    </van-button>
                    
                    <!-- Calendar 日历 -->
                    <van-button
                        type="success"
                        style="margin-left: 8px;"
                        @click="showCalendar = true"
                    >
                        日历选择
                    </van-button>
                    <span
                        v-if="calendarDate"
                        style="margin-left: 12px;"
                    >已选日期：{{ calendarDate }}</span>
                </div>
            </section>

            <!-- ImagePreview 弹窗 -->
            <van-image-preview
                v-model:show="showImagePreviewPopup"
                :images="imagePreviewList"
            />
            
            <!-- Calendar 弹窗 -->
            <van-calendar
                v-model:show="showCalendar"
                @confirm="onCalendarConfirm"
            />

            <section class="demo-section">
                <h3>选择器组件</h3>
                <div class="demo-block">
                    <!-- Cascader 级联选择 -->
                    <van-button
                        type="primary"
                        @click="showCascader = true"
                    >
                        级联选择
                    </van-button>
                    <span
                        v-if="cascaderValue"
                        style="margin-left: 12px;"
                    >已选：{{ cascaderValue }}</span>
                    <van-popup
                        v-model:show="showCascader"
                        position="bottom"
                    >
                        <van-cascader
                            :options="cascaderOptions"
                            @close="showCascader = false"
                            @finish="onCascaderFinish"
                        />
                    </van-popup>
                    
                    <!-- DatePicker 日期选择器 -->
                    <van-button
                        type="success"
                        style="margin-left: 8px;"
                        @click="showDatePicker = true"
                    >
                        日期选择
                    </van-button>
                    <span
                        v-if="datePickerValue"
                        style="margin-left: 12px;"
                    >已选：{{ datePickerValue }}</span>
                    <van-popup
                        v-model:show="showDatePicker"
                        position="bottom"
                    >
                        <van-date-picker
                            v-model="datePickerInnerValue"
                            @confirm="onDatePickerConfirm"
                            @cancel="showDatePicker = false"
                        />
                    </van-popup>
                    
                    <!-- ShareSheet 分享面板 -->
                    <van-button
                        type="primary"
                        style="margin-left: 8px;"
                        @click="showShareSheet = true"
                    >
                        分享面板
                    </van-button>
                    <van-share-sheet
                        v-model:show="showShareSheet"
                        :options="shareSheetOptions"
                        @select="onShareSheetSelect"
                    />
                </div>
            </section>

            <section class="demo-section">
                <h3>导航与布局组件</h3>
                <div class="demo-block">
                    <!-- DropdownMenu 下拉菜单 -->
                    <van-dropdown-menu>
                        <van-dropdown-item
                            v-model="dropdownValue"
                            :options="dropdownOptions"
                        />
                    </van-dropdown-menu>
                </div>
            </section>

            <section class="demo-section">
                <h3>分页与搜索</h3>
                <div class="demo-block">
                    <!-- Pagination 分页器 -->
                    <van-pagination
                        v-model="paginationCurrent"
                        :total-items="50"
                        :items-per-page="10"
                        mode="simple"
                        @change="onPaginationChange"
                    />
                    <span style="margin-left: 12px;">当前页：{{ paginationCurrent }}</span>
                    
                    <!-- Search 搜索框 -->
                    <div style="margin-top: 16px;">
                        <van-search
                            v-model="searchValue"
                            placeholder="请输入搜索关键词"
                            @search="onSearch"
                        />
                    </div>
                </div>
            </section>

            <section class="demo-section">
                <h3>其他组件</h3>
                <div class="demo-block">
                    <!-- SwipeCell 滑动单元格 -->
                    <van-swipe-cell>
                        <template #left>
                            <van-button
                                square
                                type="primary"
                                text="选择"
                            />
                        </template>
                        <van-cell
                            title="滑动单元格"
                            value="内容"
                        />
                        <template #right>
                            <van-button
                                square
                                type="danger"
                                text="删除"
                            />
                        </template>
                    </van-swipe-cell>
                    
                    <!-- Collapse 折叠面板 -->
                    <div style="margin-top: 16px;">
                        <van-collapse v-model="collapseActive">
                            <van-collapse-item
                                title="标题1"
                                name="1"
                            >
                                内容1
                            </van-collapse-item>
                            <van-collapse-item
                                title="标题2"
                                name="2"
                            >
                                内容2
                            </van-collapse-item>
                        </van-collapse>
                    </div>
                    
                    <!-- Empty 空状态 -->
                    <div style="margin-top: 16px;">
                        <van-empty description="暂无数据" />
                    </div>
                    
                    <!-- Tab 标签页 -->
                    <div style="margin-top: 16px;">
                        <van-tabs v-model="tabActive">
                            <van-tab title="标签1">
                                内容1
                            </van-tab>
                            <van-tab title="标签2">
                                内容2
                            </van-tab>
                        </van-tabs>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { showToast, showDialog, showNotify } from 'vant'
const props = defineProps({ theme: { type: String, default: 'auto' } })
const emit = defineEmits(['update:theme'])

const currentTheme = computed(() => {
    return window.themeManager ? window.themeManager.getUserPreference() : (props.theme || 'auto')
})

function setTheme(val) {
    emit('update:theme', val)
    localStorage.setItem('theme_preference', val)
}

const showPopup = ref(false)
const showPicker = ref(false)
const pickerColumns = ref([
    { text: '选项一', value: 1 },
    { text: '选项二', value: 2 },
    { text: '选项三', value: 3 }
])
const formData = reactive({ username: '', password: '' })
const numberValue = ref('')
const showKeyboard = ref(false)
const searchValue = ref('')
const showActionSheet = ref(false)
const actions = ref([
    { name: '选项A' },
    { name: '选项B' },
    { name: '选项C' },
])
const collapseActive = ref(['1'])
const showPopover = ref(false)
const popoverActions = ref([
    { text: '操作1' },
    { text: '操作2' },
])
const tabActive = ref(0)
const showImagePreviewPopup = ref(false)
const imagePreviewList = ref([
    'https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800',
    'https://images.unsplash.com/photo-1465101046530-73398c7f28ca?w=800',
    'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?w=800'
])
const showCalendar = ref(false)
const calendarDate = ref('')
const showCascader = ref(false)
const cascaderValue = ref('')
const cascaderOptions = ref([
    {
        text: '浙江省', value: 'zj', children: [
            { text: '杭州', value: 'hz' },
            { text: '宁波', value: 'nb' }
        ]
    },
    {
        text: '江苏省', value: 'js', children: [
            { text: '南京', value: 'nj' },
            { text: '苏州', value: 'sz' }
        ]
    }
])
const showDatePicker = ref(false)
const datePickerValue = ref('')
const datePickerInnerValue = ref(['2024', '06', '01'])
const dropdownValue = ref('a')
const dropdownOptions = ref([
    { text: '选项A', value: 'a' },
    { text: '选项B', value: 'b' },
    { text: '选项C', value: 'c' }
])
const showShareSheet = ref(false)
const shareSheetOptions = ref([
    [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' }
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '二维码', icon: 'qrcode' }
    ]
])
const paginationCurrent = ref(1)

function onPickerConfirm({ selectedOptions }) {
    showToast('选择了：' + (selectedOptions && selectedOptions[0] ? selectedOptions[0].text : ''))
    showPicker.value = false
}
function onFormSubmit(values) {
    showToast('提交：' + JSON.stringify(values))
}
function onNumberInput(val) {
    numberValue.value += val
}
function onNumberDelete() {
    numberValue.value = numberValue.value.slice(0, -1)
}
function onActionSelect(action) {
    showToast('选择了：' + action.name)
    showActionSheet.value = false
}
function showDialogFn() {
    showDialog({
        message: '这是一个Dialog弹窗',
        title: '提示'
    })
}
function showNotifyFn() {
    showNotify({
        message: '这是一条通知'
    })
}
function onPopoverSelect(action) {
    showToast('选择了：' + action.text)
    showPopover.value = false
}
function onSearch(val) {
    showToast('搜索：' + val)
}
function showImagePreview() {
    showImagePreviewPopup.value = true
}
function onCalendarConfirm(date) {
    const y = date.getFullYear()
    const m = (date.getMonth() + 1).toString().padStart(2, '0')
    const d = date.getDate().toString().padStart(2, '0')
    calendarDate.value = `${y}-${m}-${d}`
    showCalendar.value = false
    showToast('选择了日期：' + calendarDate.value)
}
function onCascaderFinish({ selectedOptions }) {
    cascaderValue.value = selectedOptions.map(opt => opt.text).join('/')
    showCascader.value = false
    showToast('选择了：' + cascaderValue.value)
}
function onDatePickerConfirm(value) {
    datePickerValue.value = value.join('-')
    datePickerInnerValue.value = value
    showDatePicker.value = false
    showToast('选择了日期：' + datePickerValue.value)
}
function onShareSheetSelect(option) {
    showShareSheet.value = false
    showToast('分享方式：' + option.name)
}
function onPaginationChange(page) {
    paginationCurrent.value = page
    showToast('切换到第' + page + '页')
}
</script>

<style scoped>
.vant-demo-container {
    padding-bottom: 50px;
}

.content {
    padding-top: 46px; /* 导航栏高度 */
    padding-bottom: 20px;
}

.demo-section {
    margin: 20px 16px;
    border-radius: 8px;
    overflow: hidden;
}

.demo-section h3 {
    font-size: 16px;
    font-weight: 500;
    padding: 16px 16px 0;
    margin: 0;
    color: var(--van-text-color);
}

.demo-block {
    padding: 16px;
}

.van-cell-group {
    margin-bottom: 0;
}

</style>
